<template>
  <el-form
    v-if="basicInfo"
    v-show="step === 0"
    ref="form"
    :model="basicInfo"
    :rules="basicFormRules"
    label-width="100px"
    class="form"
  >
    <el-form-item :label="$t('equipment.channelName')" prop="name">
      <el-input v-model="basicInfo.name" size="small" :placeholder="$t('equipment.channelNameInput')" style="width: 60%" />
    </el-form-item>

    <el-form-item :label="$t('equipment.channelType')" prop="type">
      <el-radio-group v-model="basicInfo.type">
        <el-radio
          v-for="it in dictType"
          :key="it.label"
          :label="it.label"
        >{{ it.text }}
        </el-radio>
      </el-radio-group>
    </el-form-item>

    <el-form-item v-if="basicInfo.type !== '0'" label="日期区间" prop="startDateTime">
      <el-date-picker
        v-model="basicInfo.startDateTime"
        type="daterange"
        range-separator="至"
        :start-placeholder="$t('elButton.startTime')"
        :end-placeholder="$t('elButton.endTime')"
        value-format="yyyy-MM-dd"
        size="small"
        :picker-options="pickerOptions"
      />
    </el-form-item>

    <el-form-item v-if="basicInfo.type !== '0'" label="时间区间" prop="endDateTime">
      <el-time-picker
        v-model="basicInfo.endDateTime"
        is-range
        range-separator="至"
        start-placeholder="开始时间"
        end-placeholder="结束时间"
        placeholder="选择时间范围"
        value-format="HH:mm:ss"
        size="small"
      />
    </el-form-item>

    <el-form-item :label="$t('equipment.downLoadTime')" prop="dloadTime">
      <el-checkbox v-model="basicInfo.nowDown" @change="$refs.form.clearValidate('dloadTime')">现在</el-checkbox>
      <el-date-picker
        v-show="basicInfo.nowDown === false"
        v-model="basicInfo.dloadTime"
        size="small"
        type="datetime"
        value-format="yyyy-MM-dd HH:mm:ss"
        :picker-options="pickerOptions"
      />
    </el-form-item>

    <el-form-item v-if="basicInfo.type !== '0'" :label="$t('equipment.channelPlayWeek')" prop="playWeeks">
      <el-checkbox-group v-model="basicInfo.playWeeks">
        <el-checkbox :label="'1'">星期一</el-checkbox>
        <el-checkbox :label="'2'">星期二</el-checkbox>
        <el-checkbox :label="'3'">星期三</el-checkbox>
        <el-checkbox :label="'4'">星期四</el-checkbox>
        <el-checkbox :label="'5'">星期五</el-checkbox>
        <el-checkbox :label="'6'">星期六</el-checkbox>
        <el-checkbox :label="'0'">星期天</el-checkbox>
      </el-checkbox-group>
    </el-form-item>

    <el-form-item v-if="basicInfo.type !== '0'" :label="$t('equipment.playStyle')" prop="playMode">
      <el-radio-group v-model="basicInfo.playMode">
        <el-radio
          v-for="it in dictPlayMode"
          :key="it.label"
          :label="it.label"
        >{{ it.text }}
        </el-radio>
      </el-radio-group>
    </el-form-item>

    <!--<el-form-item label="发布方式" prop="way">
      <el-radio-group v-model="basicInfo.way">
        <el-radio
          v-for="it in dictWay"
          :key="it.label"
          :label="it.label"
        >{{ it.text }}
        </el-radio>
      </el-radio-group>
    </el-form-item>-->
  </el-form>
</template>

<script>
import { isBlank } from '@/utils/obj-util'
// eslint-disable-next-line no-unused-vars
// import { checkIsRepeat } from '@/api/publish'

export default {
  name: 'Step1',
  model: {
    prop: 'form1Data',
    event: 'vmu'
  },
  props: {
    form1Data: {
      type: Object,
      default: () => null
    },
    step: {
      type: Number,
      default: -1
    },
    dictType: {
      type: Array,
      default: () => []
    },
    dictPlayMode: {
      type: Array,
      default: () => []
    },
    dictWay: {
      type: Array,
      default: () => []
    }
  },
  data() {
    const nameValidator = (rule, value, callback) => {
      if (isBlank(value)) {
        callback(new Error(this.$t('equipment.channelNameInput')))
      } else {
        callback()
        // checkIsRepeat({ name: value })
        //   .then(res => {
        //     if (res.data.code === 0) {
        //       callback()
        //     } else {
        //       callback('存在重复名字的频道，请更改频道名字')
        //     }
        //   })
        //   .catch(() => {
        //     callback('网络异常请稍后重试')
        //   })
      }
    }
    const dloadTimeValidator = (rule, value, callback) => {
      if (this.basicInfo.nowDown) {
        callback()
      } else {
        if (value) {
          callback()
        } else {
          callback(new Error('请选择下载时间'))
        }
      }
    }
    return {
      basicFormRules: {
        name: [{ required: true, validator: nameValidator }],
        type: { required: true, message: '请选择排期类型', trigger: 'blur' },
        startDateTime: { required: true, message: '请选择开始播放时间', trigger: 'blur' },
        endDateTime: { required: true, message: '请选择结束播放时间', trigger: 'blur' },
        dloadTime: { validator: dloadTimeValidator, trigger: 'blur' },
        playWeeks: { required: true, message: '请选择播放周次', trigger: 'blur' },
        playMode: { required: true, message: '请选择播放类型', trigger: 'blur' },
        way: { required: true, message: '请选择发布方式', trigger: 'blur' }
      },
      pickerOptions: {
        disabledDate(time) {
          return time.getTime() < Date.now() - 8.64e7
        }
      }
    }
  },
  computed: {
    basicInfo: {
      get() {
        return this.form1Data
      },
      set(val) {
        this.$emit('vmu', val)
      }
    }
  }
}
</script>

<style lang="scss" scoped>
  .form {
    margin-top: 4px;
  }
</style>
